{% extends "base.html" %}

{% block title %} 注册 {% endblock %}

{% block content %}
  <div id="app" class="container h-100">
    <div class="row h-100">
      <div class="col my-auto">
        <div class="mx-auto" style="max-width: 400px">
          <h2 class="d-flex">注册
            <small class="text-muted ml-auto mt-auto">任务导向对话系统</small>
          </h2>
          <hr>
          <form @submit.prevent="submit">
            <div class="form-group row">
              <label class="col-sm-3 col-form-label font-weight-bold">邀请码</label>
              <div class="col-sm-9">
                <input v-model="invitationCode" type="text" class="form-control" placeholder="在此输入邀请码" autofocus>
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label font-weight-bold">用户名</label>
              <div class="col-sm-9">
                <input v-model="username" type="text" class="form-control" placeholder="在此输入用户名">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label font-weight-bold">新密码</label>
              <div class="col-sm-9">
                <input v-model="password" type="password" class="form-control" placeholder="在此输入新密码">
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-3 col-form-label font-weight-bold">确认密码</label>
              <div class="col-sm-9">
                <input v-model="passwordRepeat" type="password" class="form-control" placeholder="再次输入新密码">
              </div>
            </div>
            <div class="d-flex">
              <div class="text-danger" v-text="error"></div>
              <a class="ml-auto text-muted" href="{{ url_for('.login') }}">
                已有账号？点此登录
              </a>
            </div>
            <button type="submit" class="mt-3 btn btn-block btn-primary" disabled
                    :disabled="!username || !password || !passwordRepeat || !invitationCode">注册
            </button>
          </form>
        </div>
      </div>
    </div>
  </div>
{% endblock %}

{% block script %}
  <script type="text/javascript">
    new Vue({
      el: '#app',
      data() {
        return {
          username: '',
          password: '',
          passwordRepeat: '',
          invitationCode: '',

          error: null
        }
      },
      methods: {
        async submit() {
          if (!this.username || !this.password) return
          if (this.password != this.passwordRepeat) {
            this.passwordRepeat = ''
            this.error = '两次输入的密码不一致'
            return
          }
          this.error = null
          const { username, password, invitationCode } = this
          try {
            const data = await axios.post('/services/register', {
              username,
              password,
              invitationCode
            })
            window.location.href = '/login'
          } catch (err) {
            this.error = err.response ? err.response.data : '未知错误'
          }
        }
      }
    })
  </script>
{% endblock %}
